import React, { useCallback, useState } from "react";
import { Button, Checkbox, Input, Select, Upload } from "antd";
import style from "../../style/permissionsnav.module.scss";
import style2 from "../../style/permisscontent.module.scss";
import { addgoods } from "../../api/addgoods";

const { TextArea } = Input;

export default function Add() {
  const [selectedFile] = useState(null);
  const [isflashSale, setIsflashSale] = useState(false);
  const [ispreferential, setIspreferential] = useState(false);
  const [formData, setFormData] = useState({
    title: "",
    description: "",
    category: "",
    variety: "",
    specifications: "",
    storageCondition: "",
    currentPrice: "",
    originalPrice: "",
    recommended: "",
    recommendationReason: "",
    photos: "",
    flashSale: "",
    snappingPrice: "",
    preferential: "",
    preferentialPrice: "",
  });
  const handleGoBack = () => {
    window.history.go(-1);
  };
  const handleInputChange = useCallback((e) => {
    const { name, value } = e.target;
    setFormData((prevData) => ({
      ...prevData,
      [name]: value,
    }));
  }, []);
  const imgageAction = useCallback((info) => {
    let reader = new FileReader();
    reader.readAsDataURL(info.file.originFileObj);
    reader.onload = async (e) => {
      let avatar = e.target.result;
      setFormData((formData) => ({ ...formData, photos: avatar }));
    };
  }, []);
  const handleImageUpload = useCallback(async () => {
    const updatedFormData = {
      ...formData,
      flashSale: isflashSale,
      preferential: ispreferential,
    };
    console.log(formData);
    await addgoods(updatedFormData);
  }, [formData, isflashSale, ispreferential]);
  const onChange = (e) => {
    const isChecked = e.target.checked;
    setIsflashSale(isChecked);
  };
  const onChange1 = (e) => {
    const isChecked = e.target.checked;
    setIspreferential(isChecked);
  };
  return (
    <div className={style2.Box}>
      <div style={{ margin: "20px 0  0 0" }}>
        <span style={{ margin: "30px 10px 10px 40px" }}>商品标题:</span>
        <Input
          className={style.input}
          placeholder="请输入商品标题"
          name="title"
          value={formData.title}
          onChange={(e) => handleInputChange(e)}
        />
      </div>
      <div style={{ margin: "20px 0  0 0" }}>
        <span style={{ margin: "30px 10px 10px 40px" }}>商品描述:</span>
        <TextArea
          rows={4}
          placeholder="请输入商品描述"
          name="description"
          value={formData.description}
          onChange={handleInputChange}
        />
      </div>
      <Select
        placeholder="商品分类"
        style={{ margin: "20px 10px 0 0", width: "30vh" }}
        name="category"
        value={formData.category}
        onChange={(value) =>
          handleInputChange({ target: { name: "category", value } })
        }
        options={[
          { value: "vegetable", label: "蔬菜" },
          { value: "meat", label: "肉类" },
          { value: "Soybean", label: "豆制品" },
        ]}
      />
      <div style={{ margin: "20px 0  0 0" }}>
        <span style={{ margin: "30px 10px 10px 40px" }}>商品品种:</span>
        <Input
          className={style.input}
          placeholder="请输入商品品种"
          name="variety"
          value={formData.variety}
          onChange={handleInputChange}
        />
      </div>
      <div style={{ margin: "20px 0  0 0" }}>
        <span style={{ margin: "30px 10px 10px 40px" }}>商品规格:</span>
        <Input
          className={style.input}
          placeholder="请输入商品规格"
          name="specifications"
          value={formData.specifications}
          onChange={handleInputChange}
        />
      </div>
      <Select
        placeholder="存储条件"
        style={{ margin: "20px 10px 0 0", width: "30vh" }}
        name="storageCondition"
        value={formData.storageCondition}
        onChange={(value) =>
          handleInputChange({ target: { name: "storageCondition", value } })
        }
        options={[
          {
            value: "冷藏",
            label: "冷藏",
          },
          {
            value: "常温",
            label: "常温",
          },
        ]}
      />
      <div style={{ margin: "20px 0  0 0" }}>
        <span style={{ margin: "30px 10px 10px 40px" }}>商品现价:</span>
        <Input
          className={style.input}
          placeholder="请输入商品现价"
          name="currentPrice"
          value={formData.currentPrice}
          onChange={handleInputChange}
        />
      </div>
      <div style={{ margin: "20px 0  0 0" }}>
        <span style={{ margin: "30px 10px 10px 40px" }}>商品原价:</span>
        <Input
          className={style.input}
          placeholder="请输入商品原价"
          name="originalPrice"
          value={formData.originalPrice}
          onChange={handleInputChange}
        />
      </div>
      <Select
        placeholder="是否推荐"
        style={{ margin: "20px 10px 0 0", width: "30vh" }}
        name="recommended"
        value={formData.recommended}
        onChange={(value) =>
          handleInputChange({ target: { name: "recommended", value } })
        }
        options={[
          {
            value: "是",
            label: "是",
          },
          {
            value: "否",
            label: "否",
          },
        ]}
      />
      <div style={{ margin: "20px 0  0 0" }}>
        <span style={{ margin: "30px 10px 10px 40px" }}>推荐理由:</span>
        <TextArea
          rows={4}
          placeholder="请输入推荐理由"
          name="recommendationReason"
          value={formData.recommendationReason}
          onChange={handleInputChange}
        />
      </div>
      <div style={{ margin: "20px 0  0 0" }}>
        <span style={{ margin: "30px 10px 10px 40px" }}>商品图片:</span>
        <Upload
          onChange={imgageAction}
          fileList={selectedFile ? [selectedFile] : []}
        >
          <Button>上传图片</Button>
        </Upload>
      </div>
      <div style={{ margin: "20px 0  0 40px" }}>
        <p style={{ margin: "30px 10px 10px 0px" }}>
          限时抢购：
          <Checkbox onChange={onChange}></Checkbox>
        </p>
        {isflashSale && (
          <div>
            <span>抢购价：</span>
            <Input
              className={style.input}
              name="snappingPrice"
              value={formData.snappingPrice}
              onChange={handleInputChange}
            />
          </div>
        )}
      </div>
      <div style={{ margin: "20px 0  0 40px" }}>
        <p style={{ margin: "30px 10px 10px 0px" }}>
          绿卡优惠：
          <Checkbox onChange={onChange1}></Checkbox>
        </p>
        {ispreferential && (
          <div>
            <span>绿卡价：</span>
            <Input
              className={style.input}
              name="preferentialPrice"
              value={formData.preferentialPrice}
              onChange={handleInputChange}
            />
          </div>
        )}
      </div>
      <div>
        <Button onClick={handleGoBack}>返回</Button>
        <Button onClick={handleImageUpload}>保存</Button>
      </div>
    </div>
  );
}
